<template>
  <div class="parent">
    <echartsDom
      v-if="isShowEcharts"
      style="width: 100%; height: 100%"
      :width="'100%'"
      :height="'100%'"
      :option="option"
      :type="type"
      @setNote="getNoteData"
    />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryDictData } from "@/api/common";
import { deviceStat } from "@/api/waterKanban";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  eqpRunStatusList: {}
});
const { option, eqpRunStatusList } = toRefs(state);

const getNoteData = params => {
  if (params.componentType === "series") {
    // 当点击的是柱状图的柱子时，params.componentType 等于 'series'
    // alert('您点击了：' + params.name + '，值为：' + params.value);
    // if (params.name == '带病') {
    //   // TODO 跳转到设备运行 带病
    //   router.push({ path: '/all/equip/runManage/record' });
    // }
    let s = eqpRunStatusList.value.filter(v => v.name == params.name);
    let status = "";
    if (s.length) {
      status = s[0].value;
    }
    router.push({ path: "/all/equip/runManage/status", query: { eqpRunStatus: status, className: "WATER" } });
  }
};

const getoptions = () => {
  deviceStat({
    classCode: "WATER"
  }).then((response: any) => {
    console.log(response);
    isShowEcharts.value = true;
    option.value = {
      backgroundColor: props.type == "dark" ? "#001e3b" : "",
      color:
        props.type == "dark"
          ? ["#4C9CFF", "#FFD360", "#909399", "#F87171", "#34d399", "#CDD0D6"]
          : ["#5792F3 ", "#ffca45", "#ccc", "#28D892", "#00b36d", "#CDD0D6"],
      grid: {
        left: "10px",
        top: "40px",
        right: "0px",
        bottom: "0px",
        containLabel: true
      },
      // legend: {},
      tooltip: {
        confine: true,
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        data: ["运行", "故障", "带病", "离线", "待机"]
      },
      yAxis: {
        name: "台",
        type: "value"
      },
      series: [
        {
          data: [
            response.deviceStatusStat.运行,
            response.deviceStatusStat.故障,
            response.deviceStatusStat.带病,
            response.deviceStatusStat.离线,
            response.deviceStatusStat.待机
          ],
          type: "bar",
          name: "数量",
          stack: "total",
          barWidth: "25px",
          emphasis: {
            focus: "series"
          },
          label: {
            show: true,
            position: "top",
            formatter: "{c}"
          },
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList =
                  props.type == "dark"
                    ? ["#04FF9D", "#FF0844", "#FFCA45", "#DEDBDB", "#00C2FF", "#CDD0D6"]
                    : ["#19D08D", "#F45252", "#FECD4B", "#D0D0D0", "#2885F7", "#CDD0D6"];
                let colorItem = colorList[params.dataIndex];
                return colorItem;
              }
            }
          }
        }
      ]
    };
  });
};
onMounted(() => {
  setTimeout(() => {
    getoptions();
  }, 100);
  queryDictData({ typeCode: "EQP_RUN_STATUS" }).then(res => {
    eqpRunStatusList.value = res;
  });
});
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
